<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片下载器By_GGBond</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      width: 350px;
      padding: 10px;
    }
    h2 {
      color: #4CAF50;
      text-align: center;
      margin-top: 0;
    }
    .input-group {
      margin-bottom: 10px;
    }
    .input-group label {
      display: block;
      margin-bottom: 5px;
    }
    .input-group input {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }
    .buttons {
      text-align: center;
      margin-top: 15px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 8px 15px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      margin: 0 5px;
    }
    button:hover {
      background-color: #45a049;
    }
    #status {
      margin-top: 10px;
      text-align: center;
      color: #4CAF50;
    }
    .progress {
      margin-top: 10px;
      height: 20px;
      background-color: #f1f1f1;
      border-radius: 5px;
      display: none;
    }
    .progress-bar {
      height: 100%;
      background-color: #4CAF50;
      border-radius: 5px;
      width: 0%;
    }
    .file-selector {
      margin: 10px 0;
      text-align: center;
    }
    #file-info {
      font-size: 12px;
      margin-top: 5px;
      color: #666;
    }
    .upload-btn-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    .upload-btn-wrapper input[type=file] {
      font-size: 100px;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
    /* 示例文件下载区域样式 */
    .file-download {
      text-align: center;
      margin: 10px 0;
    }
    .file-download a {
      color: #2196F3;
      text-decoration: none;
      font-size: 14px;
    }
    .file-download a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h2>图片下载器By_GGBond</h2>
  
  <!-- 图片网站地址输入框已注释，改为使用默认网址列表
  <div class="input-group">
    <label for="baseUrl">图片网站地址：</label>
    <input type="text" id="baseUrl" placeholder="请输入图片网站地址，例如: https://pixabay.com/zh 或 https://www.bing.com/images/search?q=">
  </div>
  -->

  <!-- 默认使用的图片网站地址列表 -->
  <div id="defaultUrlsContainer" style="display: none;">
    <input type="hidden" class="search-url" value="https://www.bing.com/images/search?q=" data-name="Bing">
    <input type="hidden" class="search-url" value="https://pixabay.com/zh/" data-name="Pixabay">
    <!-- 在此处添加更多的图片网站地址 -->
  </div>

  <!-- 示例文件下载区域 -->
  <div class="file-download">
    <span>如果您没有准备好上传文件，可先</span>
    <a href="eg.txt" download="eg.txt">下载示例文件格式</a>
  </div>

  <div class="file-selector">
    <div class="upload-btn-wrapper">
      <button class="btn">上传图片列表文件</button>
      <input type="file" id="fileInput" accept=".txt" />
    </div>
    <div id="file-info">未选择文件</div>
  </div>

  <div class="buttons">
    <button id="startDownload">开始下载</button>
  </div>

  <div id="status"></div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>

  <script src="popup.js"></script>
</body>
</html> 